<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <title>添加公告</title>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" id="title" required lay-verify="required" placeholder="请输入标题"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">失效时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="expirydDate" id="expirydDate" required lay-verify="required"
                           placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择图片</label>
                <div class="layui-input-inline">
                    <div class="layui-upload">
                        <img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px">
                        <p id="demoText"></p>
                    </div>
                </div>
                <label class="layui-form-label">内容</label>
                <div class="layui-input-inline">
                    <textarea name="content" placeholder="请输入内容" required lay-verify="required"
                              class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="margin-left: 80px">

                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-lg" lay-submit lay-filter="add">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-lg">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script src="/static/assets/layui.all.js"></script>
<script src="/static/assets/jquery.min.js"></script>
<script src="/static/assets/limit.js"></script>
<script>
    $(function (){
        layui.use(['upload', 'form', 'laydate', 'layer'], function () {
            var upload = layui.upload,
                form = layui.form,
                laydate = layui.laydate,
                layer = layui.layer;
            var releaseState = 1
            //常规用法
            laydate.render({
                elem: '#expirydDate'
            });
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#demo1'
                , url: '/upload/show' //改成您自己的上传接口
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code === 0) {
                        return layer.msg('上传失败');
                    }
                    imgs = res.data.filePath
                    //上传成功
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
            form.on('submit(add)', function (data) {
                layer.confirm('您确定要增加公告吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    data.field.imgs = imgs
                    data.field.releaseState = releaseState
                    console.log(data.field)
                    $.ajax({
                        url: "/announcement/addAnnouncement"
                        , type: "post"
                        , dataType: "json"
                        , contentType: "application/json"
                        , data: JSON.stringify({Announcements: data.field})
                        , success: function (res) {
                            console.log(res)
                            layer.msg("添加成功", {icon: 1})
                            toParent()
                        }
                        , error: function (data) {

                        }
                    })
                }, function () {
                    layer.msg('已取消', {
                        time: 2000, //20s后自动关闭
                    });
                });

                return false;
            })

        })
    })

</script>
